<script setup>
import { useUserStore } from '@/stores/user';
import UploadImage from "@/components/UploadImage/UploadImage.vue"
import { ref, reactive, onMounted } from "vue"
import utils from "@/utils"
import { message } from 'ant-design-vue';
import { changeMineModify } from "@/apis/login"
import dayjs from 'dayjs';

const user = useUserStore();
const UploadimageRef = ref(null);
const loading = ref(false)
onMounted(() => {
    loadingData();
})
const formState = reactive({
    username: null,
    nickName: null,
    img: "",
    sex: null,
    birth: null,
    email: null,
    createTime:null,
});
const loadingData = () => {
    for (const key in formState) {
        formState[key] = user.userInfo[key]
    }
}
const upload = (file) => {
    console.log(file);
}
const handleSubmit = () => {
    loading.value = true
    changeMineModify(formState).then(res => {
        if (res.code === 1) {
           let time= setTimeout(() => {
                user.getUserInfo(res.data);
                loading.value = false
                message.success('修改成功');
                clearTimeout(time);
            }, 1000)

        } else {
            message.success(res.msg);
        }
        console.log(res);
    })
}
const uploadImg = (file) => {
    formState.img=file
}
const deleteFile = (options) => {
    formState.img = options
}

</script>
<template>
    <!-- 个人中心 -->
    <!-- /personal-managing/personalCenter -->
    <div class="personal-center">
        <div class="personal-info">
            <div class="top-title">个人信息</div>
            <div class="personal-info-container">
                <div class="profile-photo">
                    <div v-if="user.userInfo.img">
                        <a-image :src="user.userInfo.img" />
                    </div>
                    <div v-else class="up-img">
                        <img src="@/assets/images/userHead.png" alt="">
                    </div>
                </div>
                <div class="li-container">
                    <div>用户名称：</div>
                    <div>{{ '未知' && user.userInfo.username }}</div>
                </div>
                <div class="li-container">
                    <div>用户昵称：</div>
                    <div>{{ '未知' && user.userInfo.nickName }}</div>
                </div>
                <div class="li-container">
                    <div>性别：</div>
                    <div>{{ '未知' && (user.userInfo.sex == 1 ? '男' : '女') }}</div>
                </div>
                <div class="li-container">
                    <div>手机号码：</div>
                    <div>{{ '未知' && user.userInfo.phone }}</div>
                </div>
                <div class="li-container">
                    <div>用户邮箱：</div>
                    <div>{{ '未知' && user.userInfo.email }}</div>
                </div>
                <div class="li-container">
                    <div>创建日期：</div>
                    <div>{{ '未知' && user.userInfo.createTime }}</div>
                </div>
            </div>
        </div>
        <div class="basics-info">
            <div class="top-title">基本资料</div>
            <div class="top-title-container">
                <div>
                    <span>名字：</span>
                    <div><a-input v-model:value="formState.username" placeholder="请输入名字" /></div>
                </div>
                <div>
                    <span>昵称：</span>
                    <div>
                        <a-input v-model:value="formState.nickName" placeholder="请输入昵称" />
                    </div>
                </div>
                <div>
                    <span>头像：</span>
                    <div>
                        <UploadImage  @upload="uploadImg" :list="formState.img"  :maxNum="1" @delete="deleteFile"/>
                    </div>
                </div>
                <div>
                    <span>性别：</span>
                    <div>
                        <a-radio-group v-model:value="formState.sex" name="radioGroup">
                            <a-radio :value="1">男</a-radio>
                            <a-radio :value="2">女</a-radio>
                        </a-radio-group>
                    </div>
                </div>
                <div>
                    <span>生日：</span>
                    <div>
                        <a-input v-model:value="formState.birth" placeholder="请输入生日YYYY-MM-DD" />
                    </div>
                </div>
                <div>
                    <span>邮件：</span>
                    <div>
                        <a-input v-model:value="formState.email" placeholder="请输入邮箱" />
                    </div>
                </div>
                <div class="submit-btn">
                    <span></span>
                    <a-button type="primary" @click="handleSubmit" :loading="loading">
                        确认
                    </a-button>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
.personal-center {

    width: 100%;
    display: flex;
    height: 100%;

    .personal-info {
        width: 20%;
        min-width: 300px;
        margin-right: 20px;
        background: #fff;
        display: flex;
        flex-direction: column;

        .personal-info-container {
            padding: 15px;

            .profile-photo {
                border-bottom: 1px solid #EBEEF5;
                position: relative;

                &>div {
                    width: 120px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 40px auto;
                }

                img {
                    display: block;
                    width: 120px !important;
                    height: 120px !important;
                    margin: 20px auto;
                    border-radius: 50%;
                }
            }

            .li-container {
                padding: 11px 0;
                font-size: 13px;
                border-bottom: 1px solid #EBEEF5;
                display: flex;
                align-items: center;
            }
        }
    }

    .basics-info {
        width: calc(100% - 20% - 20px);
        min-width: 800px;
        background: #fff;
        display: flex;
        flex-direction: column;

        .top-title-container {
            padding: 30px;
            width: 60%;

            &>div {
                width: 100%;
                display: flex;
                align-items: center;
                margin: 20px 0px;

                &>span:nth-child(1) {
                    width: 80px;
                }

                &>div:nth-child(2) {
                    flex: 0 0 calc(100% - 80px);
                }
            }
        }
    }

    .submit-btn {
        button {
            width: calc(100% - 80px);
            margin: 0 auto;
        }
    }

    .top-title {
        border-bottom: 1px solid #EBEEF5;
        padding: 15px;
    }
}</style>